<template>
  <div class="granary-view">
    <van-search @click="goToHomeSearchView" shape="round" disabled :left-icon="icon" placeholder="幻想学院" />

    <div class="nav">
      <ul>
        <li v-for="(gn, index) in granaryNaviDataArr" :key="index" @click="goToGranaryNavItem(gn.url, index)">
          <img :src="gn.img" />
        </li>
      </ul>
    </div>

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
      <div class="list">
        <div v-for="(gl, i) in granaryListDataArr" :key="i">
          <div class="one item" v-if="gl.moduleType == 0">
            <h2>{{ gl.moduleName }}</h2>
            <div class="box">
              <granary-list-item-type-one v-for="s in gl.dataList" :key="s.itemId" :bigAvaImg="s.blogInfo.bigAvaImg"
                :blogNickName="s.blogInfo.blogNickName" :hotCount="s.postData.postCount.hotCount"
                :digest="s.postData.postView.digest" :orign="s.postData.postView.firstImage.orign"
                :tag="s.postData.postView.tagList[0]" :id="s.postData.postView.id" :goToHomeItem="goToHomeItem" />
            </div>
          </div>

          <div class="two item" v-if="gl.moduleType == 1">
            <h2>{{ gl.moduleName }}</h2>
            <div class="box">
              <granary-list-item-type-two v-for="s in gl.dataList" :key="s.itemId" :coverUrl="s.postCollection.coverUrl"
                :name="s.postCollection.name" :postCount="s.postCollection.postCount"
                :viewCount="s.postCollection.viewCount" :tag="s.postCollection.tagList[0]" />
            </div>
          </div>

          <div class="three item" v-if="gl.moduleType == 2">
            <h2>{{ gl.moduleName }}</h2>
            <div class="box">
              <granary-list-item-type-three v-for="(s, i) in gl.dataList" :key="s.itemId" :index="i"
                :bigAvaImg="s.blogInfo.bigAvaImg" :blogNickName="s.blogInfo.blogNickName"
                :hotCount="s.postData.postCount.hotCount" :digest="s.postData.postView.digest"
                :orign="s.postData.postView.firstImage.orign" :tag="s.postData.postView.tagList[0]"
                :id="s.postData.postView.id" :goToHomeItem="goToHomeItem" />
            </div>
          </div>
        </div>
      </div>
      <wd-infinite-load ref="loadmore" @loadmore="loadmore" :offset="10" :immediate-check="false"
        :loading="loading"></wd-infinite-load>
    </van-pull-refresh>
  </div>




</template>

<script>
import { get_granary_html, get_granary } from "@/apis/http.js"; //首先，引入http.js中暴露的获取用户的方法

import GranaryListItemTypeOne from "@/components/HomeComponents/GranaryComponents/GranaryListItemTypeOne.vue";
import GranaryListItemTypeTwo from "@/components/HomeComponents/GranaryComponents/GranaryListItemTypeTwo.vue";
import GranaryListItemTypeThree from "@/components/HomeComponents/GranaryComponents/GranaryListItemTypeThree.vue";
export default {
  name: "GranaryView", //粮仓页
  components: {
    GranaryListItemTypeOne,
    GranaryListItemTypeTwo,
    GranaryListItemTypeThree
  },
  data() {
    return {
      time: 5,
      loading: false,
      isLoading: false,
      icon: require("@/assets/images/home/search.png"),
      granaryNaviDataArr: [],
      granaryListDataArr: [],
      html: null
    };
  },
  created() { },
  mounted() {
    this.getNewGranary();

    this.getGranaryHtml();
  },
  methods: {
    async getGranaryHtml() {
      //通过路由传参的形式，请求数据！！！ {data:res}直接结构赋值出来data给res
      let { data: res } = await get_granary_html();
      // console.log(res); 这样就获取到了请求的所有数据！
      this.html = res;
      //后续就可以通过赋值的方式，在页面上渲染数据。
    },

    async getNewGranary() {
      //通过路由传参的形式，请求数据！！！ {data:res}直接结构赋值出来data给res
      let { data: res } = await get_granary();
      // console.log(res); //这样就获取到了请求的所有数据！
      this.granaryNaviDataArr = res.navi;
      this.granaryListDataArr = res.list;
      //后续就可以通过赋值的方式，在页面上渲染数据。
    },

    async getGranary() {
      //通过路由传参的形式，请求数据！！！ {data:res}直接结构赋值出来data给res
      let { data: res } = await get_granary();
      // console.log(res); //这样就获取到了请求的所有数据！
      this.granaryListDataArr.push(...res.list);
      //后续就可以通过赋值的方式，在页面上渲染数据。
    },

    goToHomeSearchView() {
      this.$router.push({
        name: "search"
      });
    },

    goToGranaryNavItem(url, index) {
      this.$router.push({
        name: "granary-nav-item",
        params: {
          url,
          index
        }
      });
    },

    goToHomeItem(id) {
      // this.$router.go(0);
      // console.log(this.$route.params.id);
      this.$router.push({
        name: "item",
        params: {
          id
        }
      });
    },

    onRefresh() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.isLoading = false;
          this.getNewGranary();
          // this.$router.go(0);
        });
      }, 1000);
    },

    loadmore() {
      this.loading = true;

      if (this.time) {
        setTimeout(() => {
          this.getGranary();
          this.loading = false;
          // 模拟请求，请求3次，3次结束后设置加载结束
          this.time--;
        }, 1000);
      } else {
        this.$refs.loadmore.loadEnd();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.granary-view {
  width: 100vw;
  min-height: 100vh;
  margin-bottom: 55px;
  background-color: rgb(255, 255, 255);

  .nav {
    padding: 0 10px;

    ul {
      width: 100%;
      overflow-x: scroll;
      white-space: nowrap;
      display: flex;

      li {
        margin: 0 5px;
        display: inline-block;

        img {
          width: 26vw;
        }
      }
    }
  }

  .list {
    div {
      width: 98vw;
      margin: 0 auto;

      .one,
      .three {
        .box {
          width: 100%;
          height: 262px;
          flex-direction: column;
          overflow-x: scroll;
          overflow-y: hidden;
          display: flex;
          // 折行
          flex-wrap: wrap;
          // 想要横向滚动  一定要设这个
          flex-direction: column;
          align-content: space-between;
          // 间距
          gap: 10px;

          .granary-list-item-type-one,
          .granary-list-item-type-three {
            width: 93%;
            height: 75px;
          }

          .granary-list-item-type-three {
            width: 91%;
          }
        }
      }

      .item {
        width: 94vw;
        margin: 0 auto;

        h2 {
          padding: 10px 0;
        }
      }

      .two {
        height: 160px;
        margin-bottom: 35px;

        .box {
          width: 100%;
          overflow-x: scroll;
          overflow-y: hidden;
          white-space: nowrap;
          display: flex;

          .granary-list-item-type-two {
            margin: 0 5px;
            display: inline-block;
          }
        }
      }
    }
  }
}
</style>